import React, {useEffect, useState} from 'react'
import { Form, Button, DatePicker, Modal, Row, Col,Popconfirm,Input,Select} from 'antd'
import {getContractModelList} from "@/pages/Contract/service";
const FormItem = Form.Item;
const {Option} = Select;
const formLayout = {
  labelCol: { span: 7 },
};
const { TextArea } = Input;

const colStyle = {
  xl: 8,
  lg: 8,
  md: 8,
  sm: 8,
  xs: 8,
};

const DismissForm = (props) => {
  const { onSubmit, onCancel, loading,visible,record,type } = props;
  const [form] = Form.useForm();
  const [contractList,setContractList] = useState([]);

  useEffect(() => {
    if(record){
      form.setFieldsValue({name:record.name});
      getContractModelList(4,3).then(res => {
        setContractList(res.filter(item => item.detailType === (type === 'relieve' ? '26' : '27')));
      });
    }
  }, [visible]);

  const onFormCancel = () => {
    form.resetFields();
    onCancel();
  };

  const handleSubmit = async () => {
    const fieldsValue = await form.validateFields();
    form.resetFields();
    onSubmit({
      contractType:4,
      type:3,
      renewContractId:record.renewContractId,
      oid:record.oid,
      id:record.id,
      companyId:record.companyId,
      ...fieldsValue
    })
  };

  const renderContent = () => {
    return (
      <>
        <Row gutter={24}>
          <Col {...colStyle}>
            <FormItem name="name" label="签署人姓名">
              <Input disabled={true}/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="salary" label="待支付薪资" rules={[{required: true, message: '待支付薪资不能为空'},({
              validator(rule,value) {
                let pattern = /(^[1-9]([0-9]*)$|^[0-9]$)/;
                if (pattern.test(value)) {
                  return Promise.resolve();
                }
                return Promise.reject('请输入数字类型的正确金额');
              },
            })]}>
              <Input suffix="元"/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="payDate" label="支付日期" rules={[{required: true, message: '支付日期不能为空'}]}>
              <DatePicker className='widthStyle'/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="modelId" label="签订模板" rules={[{required: true, message: '签订模板不能为空'}]}>
              <Select placeholder="请选择签订模板">
                {contractList.map((item, index) => {
                  return (
                    <Option value={item.id} key={index} lable={item}>
                      {item.name}
                    </Option>
                  )
                })}
              </Select>
            </FormItem>
          </Col>
          {
            type !== 'relieve' &&  <Col {...colStyle}>
              <FormItem name="reason" label="解除原因">
                <TextArea placeholder="请输入解除原因" showCount maxLength={10}/>
              </FormItem>
            </Col>
          }
        </Row>
      </>
    )
  }

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => onFormCancel()}>取消</Button>
        <Popconfirm title={`确认是否发送解除合同?`}
                    onConfirm={() => handleSubmit()}
                    okText="是"
                    cancelText="否">
          <Button type="primary" loading={loading}>提交</Button>
        </Popconfirm>
      </>
    )
  };

  return (
    <Modal
      width={'60%'}
      destroyOnClose
      title="解除合同"
      visible={visible}
      footer={renderFooter()}
      onOk={handleSubmit}
      onCancel={() => onFormCancel()}
      onClose={() => onFormCancel()}
      okText="确认"
      cancelText="取消"
    >
      <Form
        {...formLayout}
        form={form}
        style={{ paddingTop: '24px' }}
      >
        {renderContent()}
      </Form>
    </Modal>
  )
};
export default DismissForm;
